Создаем красивый градиент фона + трансформация skew в CSS3

Ранее в блоге мы уже рассказывали про линейные градиенты и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3.

Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia, который является прекрасным примером профессионального использования всех возможностей CSS3.

Правда, мы не будем повторять один в один реализацию фона с данного проекта, а попробуем воссоздать нечто отдаленно похожее. Во-первых, судя по всему, разработчкии BrightMedia сейчас уже не используют линейные градиенты, заменив их на canvas. Во-вторых, наша основная задача — потренирвоаться с linear-gradient и skew трансформацией в CSS3. В итоге должно получиться что-то вроде следующей картинки:

1. Подготовка и контейнер

Для того, чтобы создать на CSS градиенты фона нам потребуется реализовать наложение нескольких слоев элементов DIV на странице, имеющей черный цвет. Прежде чем прибегнуть к опциям CSS3 для работы с 2D-трансформацией и linear-gradient, задаем размеры и местоположение блоков. Открываем новый файл CSS стилей и начнем его с такого кода:

* { 
  margin: 0;
  padding: 0;
  border: 0;
}
 
body {
  background: #000;
}

При создании основного контейнера DIV используем произвольные размеры и полное разрешение. Данный четырехугольник представляет собой область наложения градиентов.

В HTML файл пишем код:

<body>
  <div class="mainblock"></div>
</body>

Стили при этом следующие:

.mainblock {
  background: none;
  margin: 250px auto;
  width: 1800px;
  height: 700px  
}

2. Слои

Будем называть наши градиентные слои «mylayer». Как только вы создадите один такой элемент, работа с остальными не вызовет сложностей (процесс абсолютно идентичен). Все начинается с четырехугольника, к которому применим 2D-трансформацию, а именно метод skew. Это позволит исказить его, наклонив его оси X. Все слои в примере имеют наклон = 45 градусов влево или вправо. В HTML добавляем:

<body>
  <div class="mainblock">
    <div class="mylayer1"></div>
    <div class="mylayer2"></div>  
    <div class="mylayer3"></div>
    <div class="mylayer4"></div>
    <div class="text">Красивый градиент фона и трансформация skew в CSS3</div>      
  </div>
</body>

Последним в коде расположен текстовый блок. CSS стили при этом следующие:

.mylayer1 {
  width: 550px;
  height: 600px;
  float: left;
  margin: -15% 0% 0 10%;
  transform: skew(45deg, 0deg);
}
 
.mylayer2 {
  width: 400px;
  height: 600px;
  float: left;
  margin: 2% 0% 0% 10%;
  transform: skew(45deg, 0deg);
}
 
.mylayer3 { 
  width: 270px;
  height: 450px;
  float: left;
  margin: 5% 0% 0% -42%;
  transform: skew(-45deg, 0deg);
}
 
.mylayer4 { 
  width: 350px;
  height: 300px;
  float: left;
  margin: -22% 0% 0% -10%;
  transform: skew(-45deg, 0deg);
}

Увидеть блоки без фона можно путем добавления в код свойства border.

3. Градиент для фона

Итак, на предыдущем мы определили местоположение блоков DIV + задали им искажение. Теперь можно подобрать соответствующий градиент. В данном примере наиболее подходящим является линейный градиент, однако, можно использовать и радиальный. Для каждого из классов добавляете нужную заливку, например:

.mylayer1 {
  background: linear-gradient(to bottom, rgba(229,243,12,0), rgba(243,61,12,0.4), rgba(12,99,243,0));
}
 
.mylayer2 {
  background: linear-gradient(to bottom, rgba(30,60,55,0.2), rgba(75,40,125,0.5), rgba(60,20,80,0.6),rgba(0,0,0,0));
}
 
.mylayer3 { 
  background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8));
}
 
.mylayer4 { 
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(35,25,65,0.5), rgba(140,60,130,0.9));
}.

Вы можете направлять градиент вверх, вниз, влево или вправо, определяя значение цвета с помощью метода rgba(). При этом кроме фона можно определить степень прозрачности блоков.

4. Фоновое изображение

Наиболее красивый градиент фона получается при наложении цветов с невысоким уровнем прозрачности, достаточном для того, чтобы нижние слои были видны. Также на странице можно добавить дополнительный фон — например, на сайте BrightMedia есть прозрачный Png файл с точками и линиями. Нужно создать соответствующую картинку, загрузить ее на ваш сайт, а в стилях для body добавить что-то вроде:

body {
  background: url(http://мой_сайт/img/dots9.png) repeat fixed center, #000;
}

5. Итого

Дабы итоговый CSS градиент фона удовлетворил вас на 100%, придется несколько раз редактировать код и просматривать, что же получилось на сайте. Результат достигается путем проб и ошибок до тех пор, пока не будет подобрано наилучшее сочетание наложения различных блоков. Вот мой финальный код (можно глянуть на codepen):

See the Pen reEqVR by Alex (@alextod) on CodePen.

Трансформация skew в CSS

Напоследок пару слов о функции CSS transform skew, которую мы использовали в примерах выше. Как вы уже наверняка поняли, она осуществляет 2D-трансформацию с определенным блоком DIV, задавая ему определенное искажение (отклонение) относительной оси X и/или Y. Есть 3 варианта использования данного метода:

skewX() — искажение вдоль оси X;
skewY() — отклонение по оси Y;
skew() — одновременно задается значения и по X и по Y.

В последнем случае для skew вам нужно будет задавать 2 величины (по X и Y), например так:

div {
    -ms-transform: skew(45deg, 5deg); /* for IE 9 */
    -webkit-transform: skew(45deg, 5deg); /* for Safari */
    transform: skew(45deg, 5deg);
}

Кстати, такая запись используется для корректной работы кода в IE 9 и Safari. Если при использовании функции skew второй параметр опускается, то предполагается, что он равен 0. У skewX и skewY изначально есть только одно значение.

В принципе, ничего сложного в трансформации skew нету. Можете попробовать создать несколько примеров дабы понять для себя как именно производится искажение. Не знаю насколько красивый градиент фона на CSS у нас получился, но что-то новое для себя вы определенно узнали.